<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{price}} </h1>
        <input type="text" v-model="price">
    </div>
</body>
<script>
    const { reactive, toRefs, watch, watchEffect } = Vue
    const app = Vue.createApp({
        setup (props, context) {
            const state = reactive({
                price: 100,
                name: '张一'
            })
            const { price, name } = toRefs(state)
            // 使用侦听器
            // 侦听器有三个参数
            // 1. 需要侦听的属性名
            // 2. 侦听到数据变化后的回调函数
            // 3. 侦听器的配置
            // watch(price, (currenValue, prevValue) => {
            //     console.log(currenValue, prevValue);

            //     console.log('h1 中的内容是：', document.querySelector('h1').innerText);

            // }, { // 侦听器的配置
            //     // immediate 配置侦听器为非惰性
            //     // immediate: true,
            //     // 深度监听
            //     deep: true,
            //     // 配置刷新机制，等到 DOM 更新结束后才会执行
            //     flush: 'post'
            // })

            // watchEffect 非惰性的侦听器,更加抽象显示函数内的变量
            // 函数内部的所有变量都会被监听，只要有一个发生改变该
            // 侦听器就会被调用执行  (谨慎使用)
            watchEffect(() => {
                // 非惰性，一上来就会立即执行一次
                // 可以监听多个属性
                // 可以做深度监听
                console.log('watchEffect: ', price.value);
                console.log('watchEffect: ', name.value);
            })

            return { price }
        },
    })
    app.mount('#app')
</script>

</html>